//---------------------------
// Grid
//---------------------------

$total-columns:           12 !default;
$base-space-unit:        1em !default;
$row-max-width:         1100px !default;

// gridCalc(1, 12) => 8.33333%

@function gridCalc($columnNumber, $totalColumns) {
  @return percentage($columnNumber / $totalColumns);
}

.row {
  margin: 0 auto;
  max-width: $row-max-width;

  @media #{$medium-up} {
    padding-left: half($line-height__medium);
    padding-right: half($line-height__medium);
  }

  @media #{$large-up} {
    padding-left: half($line-height__base);
    padding-right: half($line-height__base);
  }

  &:before,
  &:after {
    display: table;
    clear: both;
    content: " ";
  }

  .row {
    padding: 0;

    @media #{$medium-up} {
      margin-right: - half($line-height__medium);
      margin-left:  - half($line-height__medium);
    }

    @media #{$large-up} {
      margin-right: - half($line-height__base);
      margin-left:  - half($line-height__base);
    }
  }
}

.column {
  position: relative;
  float: left;
  padding-right: half($line-height__medium);
  padding-left: half($line-height__medium);
  width: 100%;

  @media #{$large-up} {
    padding-right: half($line-height__base);
    padding-left: half($line-height__base);
  }
}

@media print,
screen and (min-width:768px) {
  .post-main{
    width: 70%;
    // max-width: 800px;
  }

  .post-toc{
    width: 30%;
    padding-bottom: 100px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    flex-basis: 25%;
  }
  
  .the-content {
    padding-left: 100px;
    padding-right: 100px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
  
}

@media screen and (max-width:767px) {
  #main {
    overflow: hidden
  }
    
  .post-toc {
    margin-top: 45px;
    padding-bottom: 50px
  }

  .the-content {
    padding-bottom: 80px;
  }
}


.column--center {
  float: none;
  margin: 0 auto;
}

// Small screens

@media only screen {

  @for $i from 1 through $total-columns {
    .small#{-$i} {
      width: gridCalc($i, $total-columns);
    }
  }

}

// Medium screens :: Larger than 640px
@media #{$medium-up} {

  @for $i from 1 through $total-columns {
    .medium#{-$i} {
      width: gridCalc($i, $total-columns);
    }
  }

}

// Large screens :: Larger than 1024px

@media #{$large-up} {

  @for $i from 1 through $total-columns {
    .large#{-$i} {
      width: gridCalc($i, $total-columns);
    }
  }

}



.left-column {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  position: sticky;
  top: 0
}

.t-toc {
  margin-top: 60px;
  position: relative;
}